<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <el-col :xs="8" :sm="5" :md="5" :lg="5" :xl="5">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model.trim="queryInfo.code"
          clearable
          size="small"
          placeholder="请输入产品序号"
        ></el-input>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
        <el-date-picker
          class="goodsindex-queryInfo-li"
          v-model="value1"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="select"
          >搜索</el-button
        >
      </el-col>
      <el-col
        :xs="6"
        :sm="4"
        :md="3"
        :lg="2"
        :xl="2"
        style="display: flex; justify-content: flex-end"
      >
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          v-if="isAuth('sys:productSummary:export')"
          @click="exportHandl()"
          >导出</el-button
        >
        <!-- <el-button size="small" type="primary" v-if="isAuth('sys:modelList:ProjectDriver')"
            @click="handleProjectDriverI()" :disabled="dataProjectDriverI.length <= 0">批量关联项目</el-button>
          <el-button size="small" type="danger" v-if="isAuth('sys:modelList:delete')" @click="handleDelete()"
            :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-col>
    </el-row>

    <el-table
      :data="userList"
      border
      size="mini"
      @selection-change="selectionChangeHandle"
      :row-key="getRowID"
      style="width: 100%"
      ref="dataTable"
      :height="tableMaxHeight"
      v-loading="isloading"
    >
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序"
        width="50"
      >
      </el-table-column>
      <!-- <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column> -->
      <el-table-column
        prop="product.code"
        header-align="center"
        align="center"
        label="产品序号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="product.model"
        header-align="center"
        align="center"
        label="型号"
      >
      </el-table-column>
      <el-table-column
        prop="product.ratedCurrent"
        header-align="center"
        align="center"
        label="额定电流"
      >
      </el-table-column>
      <el-table-column
        prop="product.ratedVoltage"
        header-align="center"
        align="center"
        label="额定电压"
      >
      </el-table-column>
      <el-table-column
        prop="product.standard"
        header-align="center"
        align="center"
        label="执行标准"
      >
      </el-table-column>
      <el-table-column
        prop="product.type"
        header-align="center"
        align="center"
        label="产品类型"
      >
      </el-table-column>
      <el-table-column
        prop="activateState"
        header-align="center"
        align="center"
        label="激活状态"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.product.activateState == 0"
            >未激活</el-tag
          >
          <el-tag v-if="scope.row.product.activateState == 1">已激活</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="80"
        prop="address"
        header-align="center"
        align="center"
        fixed="right"
        label="操作"
        v-if="showOrHide"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="isAuth('sys:productSummary:look')"
            @click="handleLook(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[1, 2, 10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <look v-if="lookVisible" ref="look" @getUserlist="getUserlist"></look>
  </div>
</template>

<script>
import look from "./look.vue";
import VueQr from "vue-qr";
export default {
  components: {
    look,
    VueQr,
  },
  data() {
    return {
      isShowOrHide: true,
      lookVisible: false,
      queryInfo: {
        code: "",
      },
      userList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      isloading: false,
      value1: [],
      startTime: "",
      endTime: "",
    };
  },
  computed: {
    showOrHide() {
      // if(this.isAuth('')==false&&this.isAuth('')==false&&this.isAuth('')==false){
      //     this.isShowOrHide=false;
      // }
      return true;
    },
    tableMaxHeight() {
      return window.innerHeight - 180 + "px";
    },
  },
  created() {
    // this.startTime = this.getYear();
    // this.endTime = this.commonAddMouth();
    // this.value1 = [this.startTime, this.endTime];
    this.getUserlist();
  },
  methods: {
    commonAddMouth() {
      let dat = new Date();
      //获取年月日，时间
      var year = dat.getFullYear();
      var mon =
        dat.getMonth() + 1 < 10
          ? "0" + (dat.getMonth() + 1)
          : dat.getMonth() + 1;
      var data = dat.getDate() < 10 ? "0" + dat.getDate() : dat.getDate();
      var hour = dat.getHours() < 10 ? "0" + dat.getHours() : dat.getHours();
      var min =
        dat.getMinutes() < 10 ? "0" + dat.getMinutes() : dat.getMinutes();
      var seon =
        dat.getSeconds() < 10 ? "0" + dat.getSeconds() : dat.getSeconds();

      var newDate =
        year + "-" + mon + "-" + data + " " + hour + ":" + min + ":" + seon;

      return newDate;
    },
    getYear(index = 1) {
      let dateTime = new Date(); /* 获取现在的年份 */
      // dateTime.setFullYear(dateTime.getFullYear() + Number(index));
      dateTime.setMonth(dateTime.getMonth() - Number(index));
      // dateTime.setDate(dateTime.getDate() - 1);
      dateTime.setDate(dateTime.getDate());
      var y = dateTime.getFullYear();
      var m = dateTime.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = dateTime.getDate();
      d = d < 10 ? "0" + d : d;
      var h = dateTime.getHours();
      h = h < 10 ? "0" + h : h;
      var min = dateTime.getMinutes();
      min = min < 10 ? "0" + min : min;
      var s = dateTime.getSeconds();
      s = s < 10 ? "0" + s : s;
      let date = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
      console.log(date);
      return date;
    },
    //搜素
    async select() {
      this.pageIndex = 1;
      await this.getUserlist();
    },
    //获取用户列表
    async getUserlist() {
      this.isloading = true;
      this.userList = [];
      await this.Sevice({
        url: "product/statistics",
        method: "get",
        params: {
          code: this.queryInfo.code,
          startTime: this.value1 && this.value1.length ? this.value1[0] : null,
          endTime: this.value1 && this.value1.length ? this.value1[1] : null,
        },
      })
        .then((res) => {
          // console.log(res)
          if (res && res.code == 200) {
            this.userList = res.list;
            this.totalPage = res.list.length;
            this.userList = this.userList.slice(
              (this.pageIndex - 1) * this.pageSize,
              this.pageIndex * this.pageSize
            );
          } else {
            this.userList = [];
            this.totalPage = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.isloading = false;
    },
    handleClose(done) {
      done();
    },
    //导出
    exportHandl() {
      this.Sevice({
        url: "product/export",
        method: "post",
        params: {
          code: this.queryInfo.code,
          startTime: this.value1 && this.value1.length ? this.value1[0] : null,
          endTime: this.value1 && this.value1.length ? this.value1[1] : null,
        },
        headers: { "Content-Type": "multipart/form-data" },
        responseType: "blob",
      })
        .then((response) => {
          console.log(response);
          if (response.data.type == "application/json") {
            this.$message({
              message: "未知异常，请联系管理员",
              type: "error",
              duration: 1500,
            });
            return false;
          }
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          // const fileName = decodeURI(response.headers["content-disposition"].split("=")[1]);
          const fileName = "产品总汇-" + this.getYMD() + ".xlsx";
          let objectUrl = URL.createObjectURL(blob); // 创建URL
          const link = document.createElement("a");
          link.href = objectUrl;
          // link.download = '.xlsx'// 自定义文件名
          //这里是获取后台传过来的文件名
          link.setAttribute("download", fileName);
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getYMD() {
      let myDate = new Date();
      let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let myToday = myDate.getDate(); //获取当前日(1-31)
      myMonth = myMonth > 9 ? myMonth : "0" + myMonth;
      myToday = myToday > 9 ? myToday : "0" + myToday;
      let nowDate = myYear + "-" + myMonth + "-" + myToday;
      return nowDate;
    },
    success(data) {
      console.log(data);
    },
    // 多选
    selectionChangeHandle(rows) {
      this.dataListSelections = rows;
      this.dataProjectDriverI = rows;
    },
    getRowID(row) {
      return row.id;
    },

    handleLook(data) {
      this.lookVisible = true;
      this.$nextTick(() => {
        this.$refs.look.init(data);
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUserlist();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getUserlist();
    },
  },
};
</script>

<style scoped>
.imglist {
  display: block;
  margin: 10px;
  width: 180px;
  height: 180px;
}

.goodsindex {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}

/* 预览 */
/* /deep/.el-dialog__body{
      padding: 0;
      padding-bottom: 20px;
  }
  /deep/.el-dialog__header{
      height: 0px;
      padding: 0;
  }
  /deep/.el-dialog__headerbtn{
      position: absolute;
      top: 20px;
  }
  /deep/.el-dialog__headerbtn i{
      color: #fff;
  } */
/deep/ .el-tree-node__label {
  white-space: normal;
  word-break: break-all;
}

/deep/ .el-tree-node__content {
  height: auto;
}

/* .treeOverflow::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  } */
.treeOverflow::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.treeOverflow::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #c1c1c1;
  background: #c1c1c1;
}

.treeOverflow::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #f1f1f1;
  border-radius: 0;
  background: #f1f1f1;
}
</style>
